<?php $this->regCss('iconfont/iconfont.css') ?>
<?php $this->regCss('mine.css') ?>
<?php $this->regCss('common.css') ?>
<style type="text/css">
    body{background:#000000!important;}
    .header_con{
        height: 50px;
        line-height: 50px;
        background: #1F1F1F;
        position: relative;
        text-align: center;
        margin-bottom: 5px;
    }
    .header_con p{
        font-size: 16px;
        color: #fff;
    }
    .header_con a{
        width: 25px;
        height: 20px;
        position: absolute;
        left: 20px;
        top: 15px;
        z-index: 1000;
    }
    .header_con a img{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .selecthe {
        color: rgb(51, 51, 51);
        font-size: 12px;
        line-height: 28px;
        border-top: none;
        padding: 5px 15px;
        margin: 0;
    }
    .boxflex1.paystyle {
        color: #333;
        border-top: none;
        border-bottom: none;
    }
    .btn_re:nth-child(6){
        margin-left: 0;
    }
    .group_btn .btn_re a{
        background: rgb(22, 22, 22)!important;
        color: #D6AD30!important;
        border:none;
        font-size: 14px;
    }
    .group_btn .btn_re .btn_money.on{
        background: #D6AD30 !important;
        color: white !important;
    }
    .boxflex1.paystyle.checkImg2 {
        border-top:none!important;
    }
    .payType .boxflex1.paystyle {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid rgb(43, 43, 43);
        padding: 0 30px;
    }
    .boxflex1.paystyle.checkImg2{
        border-top: 1px solid rgb(43, 43, 43)!important;
    }
    .moneyhead {
        color: #fff;
        font-size: 12px;
        height: 50px;
        line-height: 50px;
    }
    .boxflex1.paystyle span+img{
        width: 22px;
        height: 22px;
        position: relative;
        top: 14px;
    }
    .boxflex1.paystyle img:nth-child(1){
        width: 26px!important;
        height: 26px;
        border-radius: 50%;
        margin-right: 26px;
    }
    .boxflex1.paystyle span{
        font-size: 12px;
        color: rgb(255, 255, 255);
    }
    .recharge-btn{
        color: #fff;
        background: #D6AD30;
        margin: 28px;
        text-align: center;
        font-size: 15px;
        border-radius: 5px;
        padding: 7px 0;
    }
    .field-chargeAmount #chargeAmount {
        background: rgb(22, 22, 22) !important;
        border-color: rgb(76, 66, 35) !important;
        color: white;
    }
</style>

<header class="header_con">
    <a href="javascript:history.go(-1)" class="lf">
        <img src="/images/call_back.png">
    </a>
    <p>充值</p>
</header>
<div class="container " style="padding:0;">
    <p class="selecthe">选择充值面额（美金）</p>
    <div class="col-xs-12">
        <div style="padding-left: 10px;" class="form-group field-chargeAmount required">
            <input type="text" id="chargeAmount" class="form-control" placeholder="可输入10-10000的整数金额（美金）">
            <div class="help-block"></div>
        </div>            
    </div>
    <?php $form = self::beginForm(['showLabel' => false, 'action' => url(['user/pay']), 'id' => 'payform']) ?>
    <div class="boxflex1 paystyle" style="padding: 10px 15px 0;">
        <div class="group_btn clearfloat">
           <!--  <div class="btn_re">
                <a class="btn_money on">4800</a>
            </div>
            <div class="btn_re btn_center">
                <a class="btn_money">3200</a>
            </div>
            <div class="btn_re btn_center">
                <a class="btn_money">2400</a>
            </div>
            <div class="btn_re">
                <a class="btn_money">1600</a>
            </div>
            <div class="btn_re">
                <a class="btn_money">1100</a>
            </div>
       
            <div class="btn_re">
                <a class="btn_money">520</a>
            </div>
            <div class="btn_re btn_center">
                <a class="btn_money">380</a>
            </div>
            <div class="btn_re btn_center">
                <a class="btn_money">120</a>
            </div>
            <div class="btn_re">
                <a class="btn_money">50</a>
            </div> -->
        </div>
        <input type="hidden" id="amount" name="amount" value="4800">
        <input type="hidden" id="type" name="type" value="2">
    </div>
    <div class="boxflex1">
        <div class="moneyhead">充值方式</div>
    </div>
    <div class="payType">
        <div class="boxflex1 paystyle checkImg2" style="border-top:0;"  data-type="2">
            <img src="/images/icon-chat.png" style="width: 20px;">
            <span>微信支付</span>
            <img src="/images/seleted.png" alt="" style="float:right;" class="check-paytwo checkPay" >
        </div>

       <div class="boxflex1 paystyle checkImg1"  data-type="3">
            <img src="/images/alipay.png" style="width: 20px;">
            <span>支付宝支付</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-payone checkPay" >
        </div>
       <div class="boxflex1 paystyle checkImg1"  data-type="6">
            <img src="/images/alipay.png" style="width: 20px;">
            <span>支付宝wap支付</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-payone checkPay" >
        </div>
       <div class="boxflex1 paystyle checkImg2" style="border-top:0;"  data-type="10">
            <img src="/images/icon-chat.png" style="width: 20px;">
            <span>微信支付(人工)</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paytwo checkPay" >
        </div>

       <div class="boxflex1 paystyle checkImg1"  data-type="11">
            <img src="/images/alipay.png" style="width: 20px;">
            <span>支付宝支付(人工)</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-payone checkPay" >
        </div>
       <div class="boxflex1 paystyle checkImg1"  data-type="7">
            <img src="/images/pay.png" style="width: 20px;">
            <span>国付宝银联</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-payone checkPay" >
        </div>
    </div>
    <div class="recharge-btn" id="payBtn">立即充值</div>

    <?php self::endForm() ?>
    <div class="row">
        <!-- <div class="col-xs-12 text-center font_14 remain">跳转至微信安全支付网页，微信转账说明</div> -->
<!--         <div class="col-xs-12 text-center font_12">
            <font>注1：暂时只能使用借记卡充值</font>
            <br>
            <font>注2：为了管控资金风险，单日充值限额20000美金</font>
        </div> -->
    </div>
</div>
<script>
$(function() {
    $('#type').val(2);
    $(".btn_money").click(function() {
        $(".on").removeClass("on");
        $(this).addClass("on");
        $('#amount').val($(this).html());
        $("#chargeAmount").val( $(this).html() );
    });

    $("#chargeAmount").blur(function(){
        var amount = $(this).val();
        if( isNaN(amount) ){
            $(this).val(0);
            return false;
        }
        $('#amount').val(amount);
    });

    $('#payBtn').on('click', function(){
        var amount = $('#amount').val();
        if(!amount || isNaN(amount) || amount <= 0){
            alert('金额输入不合法!');
            return false;
        }
        $("#payform").submit();
    });

    $('.payType .paystyle').on('click', function(){
        var type = $(this).data('type');
        $('.payType .paystyle').each(function(){
            if (type == $(this).data('type')) {
                $(this).find('.checkPay').attr({"src":"/images/seleted.png"});
            } else {
                $(this).find('.checkPay').attr({"src":"/images/notseleted.png"});
            }
        });
        $('#type').val(type);
    });

})
</script>
